<!--
 * @Author: windys
 * @Description: 
 * @Date: 2022-02-17 16:01:09
-->
<template>
  <van-action-sheet v-model:show="show" title="开通财乎会员">
    <div class="content">
      <div class="vips">
        <div
          class="vip_item"
          :class="{ active: active === index }"
          v-for="(item, index) in list"
          :key="item.goodsId"
          @click="handleCliCKvip(item, index)"
        >
          <div class="name">{{ item.name }}</div>
          <div class="price">{{ item.originPrice }}￥</div>
          <i v-if="active === index" class="iconfont icon-youxia"></i>
        </div>
      </div>
      <van-button type="success" size="" block round @click="handlePayByWchat"
        >微信支付{{ good ? good.originPrice + "￥" : "" }}</van-button
      >
      <div class="text" @click="handleOpenAgree">
        开通即同意 <span>《财乎VIP会员服务协议》</span>
      </div>
    </div>
  </van-action-sheet>

  <AgreementVip ref="AgreementVip" src="http://www.caihuapp.com/mobile/#/vipAgreement" />
</template>



<script >
import { defineComponent, onMounted, reactive, ref } from "vue";
import { getGoodsListType, buyVipGoods } from "@/api/common";
import wx from "weixin-jsapi";
import { is_weixin } from "@/utils";
import { Toast } from "vant";
import { useRouter } from "vue-router";
import AgreementVip from "./AgreementVip.vue";
export default defineComponent({
  components: {
    AgreementVip,
  },
  setup() {
    const show = ref(false);
    const active = ref(null);
    const good = ref(null);
    const router = useRouter();
    onMounted(() => {
      init();
    });
    const list = ref([]);
    const init = async () => {
      const res = await getGoodsListType({
        pageIndex: 1,
        state: 1,
        type: 0,
      });
      if (res) {
        list.value = res;
      }
    };

    const handleCliCKvip = (item, index) => {
      active.value = index;
      good.value = item;
    };

    const handlePayByWchat = async () => {
      console.log(good.value);
      if(!good.value){
        Toast.fail('请选择')
        return
      }
      if (is_weixin()) {
        let params = {
          subjectId: good.value.goodsId,
          payType: 30,
          type: 2,
          clientIp: window.ipAddress,
          isQr: 3,
          couponCodes: "",
        };
        const res = await buyVipGoods(params);
        if (res.appid) {
          wx.config({
            debug: false, // 开启调试模式,
            appId: res.appid, // 必填，企业号的唯一标识，此处填写企业号corpid
            timestamp: res.timestamp, // 必填，生成签名的时间戳
            nonceStr: res.nonce_str, // 必填，生成签名的随机串
            signature: res.sign, // 必填，签名
            jsApiList: ["chooseWXPay"],
          });
          wx.chooseWXPay({
            appId: res.appid,
            nonceStr: res.nonce_str,
            package: "prepay_id=" + res.prepay_id,
            signType: "MD5",
            timestamp: res.timestamp,
            paySign: res.sign,
            success: function (res) {
              router.go(0);
              Toast.success("支付成功");
            },
            cancel: function (res) {
              Toast.fail("支付已取消");
            },
            fail: function (res) {
              Toast.fail("支付失败");
            },
          });
        }
      } else {
        let data = {
          subjectId: good.value.goodsId,
          payType: 30,
          type: 2,
          clientIp: window.ipAddress,
          isQr: 2,
          couponCodes: "",
        };
        const res = await buyVipGoods(data);
        let urls = res.mweb_url;
        let redirect_url = encodeURIComponent(
          `http://www.caihuapp.com/mobile/#/paySucc?id=${res.orderId}`
        );
        let url = urls + `&redirect_url=${redirect_url}`;
        window.localStorage.setItem("m_orderId", res.orderId);
        location.href = url;
      }
    };

    const AgreementVip = ref();
    const handleOpenAgree = () => {
      AgreementVip.value.show = true;
    };
    return {
      good,
      show,
      list,
      active,
      AgreementVip,
      handleCliCKvip,
      handlePayByWchat,
      handleOpenAgree,
    };
  },
});
</script>


<style lang="scss" scoped>
.content {
  padding: 10px;
  font-size: 14px;
  .time {
    color: #7f4400;
    margin: 10px 0;
    margin-left: 10px;
  }
  .vips {
    display: flex;
    justify-content: center;
    margin: 30px 0;
    .vip_item {
      border: 1px solid #ccc;
      width: 100px;
      text-align: center;
      margin: 0 10px;
      border-radius: 5px;
      height: 100px;
      position: relative;
      .name {
        margin-top: 20px;
      }
      .price {
        font-size: 24px;
        margin-top: 20px;
        color: #c9710e;
      }
      .iconfont {
        position: absolute;
        right: -4.5px;
        bottom: -4.5px;
        font-size: 20px;
        color: #c9710e;
      }
    }
    .active {
      border-color: #d87709;
      border-width: 2px;
    }
  }
  button {
    margin: 20px 0;
  }
  .text {
    text-align: center;
    span {
      color: #00aeff;
    }
  }
}
</style>
